<template>
    <div class="essay-guide-container">
        <h1>智能写作引导系统</h1>

        <!-- 作文输入区域 -->
        <div class="essay-input">
            <h3>请输入或粘贴作文内容：</h3>
            <textarea v-model="essayText" @input="onInput" placeholder="在这里输入作文内容..." rows="15"></textarea>
        </div>

        <!-- 续写建议展示 -->
        <div v-if="suggestions.length" class="suggestions-container">
            <h3>续写建议：</h3>
            <ul>
                <li v-for="(s, index) in suggestions" :key="index">{{ s }}</li>
            </ul>
        </div>

        <!-- 错误提示 -->
        <div v-if="error" class="error-message">
            {{ error }}
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'EssayGuide',
    data() {
        return {
            sessionId: '',
            essayText: '',
            suggestions: [],
            error: '',
            pollTimer: null,
        };
    },
    created() {
        // 初始化唯一 sessionId
     this.sessionId = crypto.randomUUID();
    },
    methods: {
        onInput() {
            // 每次输入都发送活动事件并重启轮询
            this.sendInputEvent();
            this.startPolling();
        },
        async sendInputEvent() {
            try {
                await axios.post('/api/input-event', {
                    session_id: this.sessionId,
                    context: this.essayText
                });
            } catch (err) {
                console.error('发送输入事件失败:', err);
                this.error = '网络异常，无法记录输入';
            }
        },
        startPolling() {
            // 若已在轮询，先清除
            if (this.pollTimer) clearInterval(this.pollTimer);
            this.pollTimer = setInterval(this.checkSuggestions, 5000);
        },
        async checkSuggestions() {
            console.log('checkSuggestions 被调用');
            try {
                const response = await axios.post('/api/check-suggestions', {
                    session_id: this.sessionId
                });
                const data = response.data;
                console.log('后端返回的数据:', data); // 查看完整的返回数据
                if (data.suggestions) {
                    console.log('建议内容:', data.suggestions); // 查看建议内容
                    this.suggestions = data.suggestions
                        .split(/\r?\n/)
                        .filter(line => line.trim());
                    clearInterval(this.pollTimer);
                    this.pollTimer = null;
                }
            } catch (err) {
                console.error('获取续写建议失败:', err);
                this.error = '无法获取续写建议';
            }
        }
    },
    beforeDestroy() {
        if (this.pollTimer) clearInterval(this.pollTimer);
    }
};
</script>

<style scoped>
.essay-guide-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
}

.essay-input {
    margin-bottom: 30px;
}

textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 15px;
    resize: vertical;
}

.suggestions-container {
    background-color: #f1f8ff;
    padding: 20px;
    border-radius: 4px;
    margin-top: 20px;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

.error-message {
    color: #e74c3c;
    padding: 10px;
    background-color: #fadbd8;
    border-radius: 4px;
    margin-top: 20px;
}
</style>
